<template>
  <div class="dmc-index">
    <!--region 统计数据-->
    <div class="date-count">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="card-item">
            <el-card class="box-card">
              <p class="icon"><span class="admin-icon" v-html="'&#xe6a3;'"></span></p>
              <p class="main-color text"><span>总用户数</span>1000<span>户</span></p>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-item">
            <el-card class="box-card">
              <p class="icon"><span class="admin-icon" v-html="'&#xe63e;'"></span></p>
              <p class="main-color text"><span>总发货量</span>1000<span>单</span></p>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-item">
            <el-card class="box-card">
              <p class="icon"><span class="admin-icon" v-html="'&#xe72d;'"></span></p>
              <p class="main-color text"><span>总订单量</span>1000<span>单</span></p>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-item">
            <el-card class="box-card">
              <p class="icon"><span class="admin-icon" v-html="'&#xe736;'"></span></p>
              <p class="main-color text"><span>总销售额</span>2.00<span>(￥)万元</span></p>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--endregion-->
    <!--region 本周订单/用户走势-->
    <el-card class="box-card-line">
      <div id="orderLine" class="order-line">
      </div>
    </el-card>
    <!--endregion-->
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default{
    components: {echarts},
    data () {
      return {}
    },
    mounted: function () {
      this.$nextTick(function () {
        this.lineChart()
      })
    },
    methods: {
      // 本周订单/用户走势
      lineChart () {
        let chart = echarts.init(document.getElementById('orderLine'))
        let option = {
          title: {
            text: `本周订单/用户趋势图`
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['用户', '订单'],
            borderColor: '#20A0FF'
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '用户',
              type: 'line',
              stack: '总量',
              areaStyle: {
                normal: {
                  color: '#20A0FF',
                  shadowColor: '#20A0FF'
                }
              },
              lineStyle: {
                normal: {
                  color: '#20A0FF'
                }
              },
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '订单',
              type: 'line',
              stack: '总量',
              areaStyle: {
                normal: {
                  color: '#fe9623'
                }
              },
              lineStyle: {
                normal: {
                  color: '#fe9623'
                }
              },
              data: [220, 182, 191, 234, 290, 330, 310]
            }
          ]
        }
        chart.setOption(option)
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import "../assets/styles/pages/index";
</style>
